<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增或编辑</title>
</head>

<body>
    <table>
        <tr hidden>
            <td><label for="">id：</label></td>
            <td><input type="text" name="id"></td>
        </tr>
        <tr>
            <td><label for="">商品名称：</label></td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td><label for="">价格：</label></td>
            <td><input type="text" name="price"></td>
        </tr>
        <tr>
            <td><label for="">库存数量：</label></td>
            <td><input type="text" name="stock"></td>
        </tr>
        <tr>
            <td><label for="">供应商：</label></td>
            <td><input type="text" name="supplier"></td>
        </tr>
        <tr>
            <td><input type="button" value="保存" onclick="save()"></td>
            <td><input type="button" value="取消" onclick="cancel()"></td>
        </tr>
    </table>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./config/request.js"></script>    
    <script src="./js/product_api.js"></script>
    <script src="./js/init.js"></script>
    <script>
        $(function () {
            // 根据id获取值
            let id = getUrlParam('id');
            console.log(id);
            // 如果id存在，则需要根据id获取对应的信息
            if (id) {
                getProductById(id).then(res => {
                    console.log(res);
                    // 根据后端接口返回的数据，拿到id对应的商品对象
                    let data = res.data;
                    //如果商品对象存在，则利用jQuery对dom节点赋值
                    if (data) {
                        $('[name=id]').val(data.id)
                        $('[name=name]').val(data.name)
                        $('[name=price]').val(data.price)
                        $('[name=stock]').val(data.stock)
                        $('[name=supplier]').val(data.supplier)
                    }
                })
            }
        })

        //获取url中的参数 其中name指的是url中的键的名称
        function getUrlParam(name) {

            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象

            var r = window.location.search.substr(1).match(reg); //匹配目标参数

            if (r != null) {
                return unescape(r[2]);
            } else {
                return null; //返回参数值
            }

        }
        function save() {
            /*
                拿到要传递的数据，发送给指定的api接口，成功后，返回列表页面，失败，则弹提示
                1、拿到要传递的数据，利用jQuery，获得指定input中的值，形成一个对象，作为参数(可能需要对数据进行一些验证)
                2、发送数据到指定api接口，利用我们自己包装的一个方法， 发起请求
                3、根据结果，做不同的处理：成功则跳转列表页，失败，则弹提示
            */
            let obj = {
                id: $('[name=id]').val(),
                name: $('[name=name]').val(),
                price: $('[name=price]').val(),
                stock: $('[name=stock]').val(),
                supplier: $('[name=supplier]').val(),
            }

            console.log(obj);

            //如果id存在，则保存的时候，区分为编辑后的保存，否则为新增后的保存
            if (obj.id) {
                putProduct(obj.id, obj).then(res => {
                    console.log(res);
                    // 编辑后保存成功，跳转回首页列表
                    if (res.code === 1000) {
                        location.href = './index.html';
                    } else {// 如果保存失败，则弹出提示信息
                        alert(code.msg);
                    }
                })
            } else {
                postProduct(obj).then(data => {
                    if (data.code === 1000) {
                        location.href = './index.html';
                    } else {
                        alert(data.msg)
                    }

                })
            }


        }
        function cancel() {
            location.href = './index.html';
        }
    </script>
</body>

</html>